<template>
    <template v-for="item in data" :key="item.id">
      <el-sub-menu
        :index="item.id"
        v-if="item.children && item.children.length > 0"
      >
        <template #title>
          <span>{{ item.title }}</span>
        </template>
        <UserMenu :data="item.children"></UserMenu>
      </el-sub-menu>
  
      <el-menu-item :index="item.path" v-else>
        <span>{{ item.title }}</span>
      </el-menu-item>
    </template>
  </template>
  
  <script setup lang="ts">
  import {} from "vue";
  defineProps(["data"]);
  </script>
  <style scoped lang="scss">
  // .el-menu--horizontal .el-menu-item .is-active {
  //   border: none;
  // }
  </style>
  